<template>
  <div id="specs_id">
    <div class="specs_top">
      <p class="specs_note">
        注:
        <br />1.增加的新栏目为当前栏目下一行
        <br />2.修改完的栏目一行需保存后提交审批才能生效
      </p>
      <div class="specs_add">
        <el-button size="mini" round @click="addspecs">增加</el-button>
      </div>
    </div>

    <template>
      <el-table :data="Specs_list" stripe style="width: 100%">
        <el-table-column prop="id" label="编号" width="180"></el-table-column>
        <el-table-column prop="specsname" label="规格名称" width="180"></el-table-column>
        <el-table-column prop="attrs" label="规格参数" v-slot="$props">
          <template>
            <el-button
              size="mini"
              type="success"
              v-for="attr in $props.row.attrs"
              :key="attr.id"
            >{{attr}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" v-slot="$props">
          <template>
            <el-button size="mini" type="success" v-if="$props.row.status==1">正常</el-button>
            <el-button size="mini" type="danger" v-else>禁用</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" v-slot="$props">
          <el-button size="mini" type="warning" @click="setspecs($props.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="delspecs_list($props.row.id)">删除</el-button>
        </el-table-column>
      </el-table>
    </template>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="count"
      :page-size="page_size"
      @current-change="totals"
    ></el-pagination>
    <AddSpecs ref="sprcs_ref" @reload_specs="reload_specs" :isShow="isShow"></AddSpecs>
  </div>
</template>

<script>
import AddSpecs from "../views/AddSpecs.vue";
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      isShow: { flig: false },
      page: 1,
      page_size: 1
    };
  },
  created() {
    this.SpecsAction();
    this.SpecsAction_count();
  },
  methods: {
    delspecs_list(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });

          this.$http.post("/specsdelete", { id }).then(res => {
            if (res.code == 200) {
              this.SpecsAction();
              this.SpecsAction_count();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    setspecs(obj) {
      this.isShow.flig = true;
      console.log(obj);
      this.$refs.sprcs_ref.set_sprcs_ref(obj);
    },
    reload_specs() {
      this.SpecsAction();
      this.SpecsAction_count();
    },
    addspecs() {
      this.isShow.flig = true;
    },
    totals(num) {
      this.page = num;
      this.SpecsAction({ page: this.page, page_size: this.page_size });
    },
    ...mapActions("SpecsStory", ["SpecsAction", "SpecsAction_count"])
  },
  computed: {
    ...mapState({
      Specs_list: state => state.SpecsStory.Specs_list,
      count: state => state.SpecsStory.count
    })
  },
  components: {
    AddSpecs
  }
};
</script>

<style>
#specs_id .specs_top {
  display: flex;
  justify-content: space-between;
}
#specs_id .specs_note {
  font-size: 12px;
  color: #c4c4c4;
  text-align: left;
}
#specs_id .specs_add > button {
  width: 80px;
  color: #ff5d3e;
  background-color: white;
  text-align: center;
}
</style>